<!DOCTYPE html>
<html>
    <head>
        <link href="css/style.css" rel="stylesheet">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fauna+One">
        <script type="text/javascript" src="js/script.js"></script>
        <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    </head>
    
    <body>
        <div class="navbar">
            <ul class="navbar">
                <li class="navbar" id="logo"><a href="https://github.com/bergmanlab/mcclintock" target="_blank" class="logo">McClintock</a></li>
                <li class="navbar"><a href="summary.html" class="navbar">Summary</a></li>
                {% if prediction_methods|length > 0 or coverage != none %}
                    <li class="navbar"><a href="html/families.html" class="navbar">TE Families</a></li>
                {% endif %}
                {% if prediction_methods|length > 0 %}
                    <li class="navbar dropdown">
                        <a href="#" class="navbar dropdown">TE Detection Methods</a>
                        <div class="dropdown-content">
                            {% for method in prediction_methods %}
                                <a href="html/{{method}}.html" class="dropdown-content">{{ method }}</a>
                            {% endfor %}
                        </div>
                    </li>
                {% endif %}
            </ul> 
        </div>

        <div class="row">
            <div class="sidebar">
                <ul class="sidebar">
                    <li class="sidebar"><a href="#runinfoHeader" class="sidebar">Run Information</a></li>
                    {% if 'trimgalore' in methods %}
                        <li class="sidebar"><a href="#fq1infoHeader" class="sidebar">Adapter Trimming Summary</a></li>
                    {% endif %}
                    {% if mapping_info != none %}
                        <li class="sidebar"><a href="#mapinfoHeader" class="sidebar">Read Mapping Information</a></li>
                    {% endif %}
                    {% if prediction_methods|length > 0 %}
                        <li class="sidebar"><a href="#plot1Header" class="sidebar">TE Prediction Summary</a></li>
                    {% endif %}
                </ul>
            </div>
            <div class="main">
                <div class="pageHeader">
                    <p class="pageHeader">Summary Report: {{ sample }}</p>
                </div>
                {% if prediction_methods|length > 0 %}    
                    <div class="sectionHeader">
                        <a href="data/run/te_prediction_summary.txt"  target="_blank"><div class="sectionHeaderRaw">Raw</div></a>
                        <div class="sectionHeaderName">TE Prediction Summary</div>
                        <div class="sectionHeaderHide" id="plot1Header" onclick="hide('plot1Div','plot1Header')">Hide</div>
                    </div>
                    <div id="plot1Div">
                        <div class="plot" id="teinfo">
                            <!-- scale height with number of y values; div will be scrollable -->
                            <div id="tester" class="toolplot" style="width:100%;height:500px;"></div>
                        </div>
                    </div>
                {% endif %}
                <div class="spacer2"></div>
                <div class="sectionHeader">
                    <a href="data/run/summary_report.txt"  target="_blank"><div class="sectionHeaderRaw">Raw</div></a>
                    <div class="sectionHeaderName">Run Information</div>
                    <div class="sectionHeaderHide" id="runinfoHeader" onclick="hide('runinfo','runinfoHeader')">Hide</div>
                </div>
                <div class="card code" id="runinfo">
                    <table class="run-information code">
                        <tr>
                            <td class="header">McClintock Version</td>
                            <td class="values"><a href="https://github.com/bergmanlab/mcclintock/tree/{{ commit }}" target="_blank">{{ commit }}</a></td>
                        </tr>
                        <tr>
                            <td class="header">Run Start</td>
                            <td class="values even">{{ run_start }}</td>
                        </tr>
                        <tr>
                            <td class="header">Run End</td>
                            <td class="values">{{ run_end }}</td>
                        </tr>
                        <tr>
                            <td class="header">Run From Directory</td>
                            <td class="values code even">{{ run_path }}</td>
                        </tr>
                        <tr>
                            <td class="header">Run Command</td>
                            <td class="values code">
                                {% for line in command %}
                                    {% if loop.index == 1 %}
                                        <p>{{ line }}</p>
                                    {% else %}
                                        <p style="text-indent: 25px;">{{ line }}</p>
                                    {% endif %}
                                {% endfor %}
                            </td>
                        </tr>
                    </table>
                </div>

                {% if 'trimgalore' in methods %}
                    <div class="spacer2"></div>
                    <div class="sectionHeader">
                        <a href="data/trimgalore/multiqc_report.html"  target="_blank"><div class="sectionHeaderRaw">MultiQC</div></a>
                        <div class="sectionHeaderName">Adapter Trimming Summary</div>
                        <div class="sectionHeaderHide" id="fq1infoHeader" onclick="hide('fq1info','fq1infoHeader')">Hide</div>
                    </div>
                    <div id="fq1info">
                        <div class="card">
                            <table class="run-information">
                                <tr>
                                    <td class="header3"></td>
                                    <td class="header3">FASTQ1</td>
                                    <td class="header2"><a href="{{ trimgalore1_file }}"  target="_blank" class="header2">TrimGalore</a></td>
                                </tr>
                                <tr>
                                    <td class="header">Total Reads Processed</td>
                                    <td class="values">{{ trimgalore1[0] }}</td>
                                    <td class="values"></td>
                                </tr>
                                <tr>
                                    <td class="header">Reads With Adapters</td>
                                    <td class="values even">{{ trimgalore1[1] }}</td>
                                    <td class="values even"></td>
                                </tr>
                                <tr>
                                    <td class="header">Reads Written</td>
                                    <td class="values">{{ trimgalore1[2] }}</td>
                                    <td class="values"></td>
                                </tr>
                                <tr>
                                    <td class="header">Total Basepairs Processed</td>
                                    <td class="values even">{{ trimgalore1[3] }}</td>
                                    <td class="values even"></td>
                                </tr>
                                <tr>
                                    <td class="header">Quality Trimmed</td>
                                    <td class="values">{{ trimgalore1[4] }}</td>
                                    <td class="values"></td>
                                </tr>
                                <tr>
                                    <td class="header">Total Written (filtered)</td>
                                    <td class="values even">{{ trimgalore1[5] }}</td>
                                    <td class="values even"></td>
                                </tr>
                                {% if paired %}
                                    <tr>
                                        <td class="header3"></td>
                                        <td class="header3">FASTQ2</td>
                                        <td class="header2"><a href="{{ trimgalore2_file }}"  target="_blank" class="header2">TrimGalore</a></td>
                                    </tr>
                                    <tr>
                                        <td class="header">Total Reads Processed</td>
                                        <td class="values">{{ trimgalore2[0] }}</td>
                                        <td class="values"></td>
                                    </tr>
                                    <tr>
                                        <td class="header">Reads With Adapters</td>
                                        <td class="values even">{{ trimgalore2[1] }}</td>
                                        <td class="values even"></td>
                                    </tr>
                                    <tr>
                                        <td class="header">Reads Written</td>
                                        <td class="values">{{ trimgalore2[2] }}</td>
                                        <td class="values"></td>
                                    </tr>
                                    <tr>
                                        <td class="header">Total Basepairs Processed</td>
                                        <td class="values even">{{ trimgalore2[3] }}</td>
                                        <td class="values even"></td>
                                    </tr>
                                    <tr>
                                        <td class="header">Quality Trimmed</td>
                                        <td class="values">{{ trimgalore2[4] }}</td>
                                        <td class="values"></td>
                                    </tr>
                                    <tr>
                                        <td class="header">Total Written (filtered)</td>
                                        <td class="values even">{{ trimgalore2[5] }}</td>
                                        <td class="values even"></td>
                                    </tr>
                                {% endif %}
                            </table>
                        </div>
                    </div>
                {% endif %}

                {% if mapping_info != none %}
                    <div class="spacer2"></div>
                    <div class="sectionHeader">
                        <a href="data/run/summary_report.txt"  target="_blank"><div class="sectionHeaderRaw">Raw</div></a>
                        <div class="sectionHeaderName">Read Mapping Information</div>
                        <div class="sectionHeaderHide" id="mapinfoHeader" onclick="hide('mapinfo','mapinfoHeader')">Hide</div>
                    </div>
                    <div class="card" id="mapinfo">
                        <table class="run-information">
                            <tr>
                                <td class="header">Read1 Sequence Length</td>
                                <td class="values">{{ r1_seq_len }}</td>
                            </tr>
                            {% if paired %}
                                <tr>
                                    <td class="header">Read2 Sequence Length</td>
                                    <td class="values even">{{ r2_seq_len }}</td>
                                </tr>
                            {% endif %}
                            <tr>
                                <td class="header">Read1 Reads</td>
                                <td class="values">{{ r1_reads }}</td>
                            </tr>
                            {% if paired %}
                                <tr>
                                    <td class="header">Read2 Reads</td>
                                    <td class="values even">{{ r2_reads }}</td>
                                </tr>
                            {% endif %}
                            <tr>
                                <td class="header">Median Insert Size</td>
                                <td class="values">{{ median_insert_size }}</td>
                            </tr>
                            <tr>
                                <td class="header">Avg Genome Coverage</td>
                                <td class="values even">{{ avg_genome_cov }}</td>
                            </tr>
                        </table>
                    </div>       
                {% endif %}
                <div class="spacer2"></div>
            </div>
        </div>
        <!-- plot 1: Tool Plots -->
        <script>
            var trace1 = {
            x: [
                {% for count in reference_counts %}
                    {{count}},
                {% endfor %}
            ],
            y: [
                {% for method in prediction_methods %}
                    "{{method}}",
                {% endfor %}
            ],
            name: 'Reference',
            orientation: 'h',
            marker: {
                color: 'rgba(25,25,25,0.6)',
                width: 1
            },
            type: 'bar'
            };

            var trace2 = {
            x: [
                {% for count in nonreference_counts %}
                    {{count}},
                {% endfor %}
            ],
            y: [
                {% for method in prediction_methods %}
                    "{{method}}",
                {% endfor %}
            ],
            name: 'Non-Reference',
            orientation: 'h',
            type: 'bar',
            marker: {
                color: 'rgba(95,95,95,0.6)',
                width: 1
            }
            };

            var data = [trace1, trace2];

            var layout = {
            barmode: 'stack',
            font: {size: 12},
            margin: {'t':50, 'b':50},
            xaxis: {automargin: true},
            yaxis: {automargin: true},
            legend: {"orientation": "h", x: 0.3, y: 1.1}
            };

            var div = document.getElementsByClassName('toolplot')[0];
            Plotly.newPlot(div, data, layout);
        </script>
    </body>

</html>